<template>
  <div ref="chartContainer" style="width: 100%; height: 100%"></div>
</template>

<script setup lang="ts" name="CustomerDataChart">
import { onMounted, ref, onUnmounted, PropType, watch, nextTick } from 'vue'
import * as echarts from 'echarts'
import { TradeArray } from '@/api/interface'

const props = defineProps({
  data: {
    type: Object as PropType<TradeArray>,
    required: true,
    default: () => ({ timeList: [], countList: [] })
  }
})

//存储图表实例
const myChart = ref<echarts.ECharts | null>(null)
const chartContainer = ref<HTMLElement | null>(null)

// 数据验证
const hasValidData = () => {
  return (
    props.data &&
    Array.isArray(props.data.timeList) &&
    Array.isArray(props.data.countList) &&
    props.data.timeList.length > 0 &&
    props.data.timeList.length === props.data.countList.length
  )
}

// 初始化图表
// const initChart = () => {
//   // 确保数据存在且有内容，并且图表容器已存在
//   if (props.data.timeList.length > 0) {
//     const chartDom = document.getElementById('tradeBar')
//     if (chartDom) {
//       // 如果已有实例，先销毁
//       if (myChart.value) {
//         myChart.value.dispose()
//       }
//       myChart.value = echarts.init(chartDom)

//       const option = {
//         tooltip: {
//           trigger: 'item',
//           axisPointer: {
//             type: 'cross',
//             crossStyle: {
//               color: '#999'
//             }
//           }
//         },
//         legend: {
//           data: ['客户数量']
//         },
//         xAxis: [
//           {
//             type: 'category',
//             data: props.data.timeList,
//             axisPointer: {
//               type: 'shadow'
//             }
//           }
//         ],
//         yAxis: [
//           {
//             type: 'value',
//             name: '客户数量'
//           }
//         ],
//         series: [
//           {
//             name: '客户总量',
//             type: 'bar',
//             data: props.data.countList
//           },
//           {
//             name: '买入交易总量',
//             type: 'line',
//             data: props.data.countList
//           }
//         ]
//       }
//       myChart.value.setOption(option)

//       //添加窗口大小变化时的重绘逻辑
//       const handleResize = () => {
//         myChart.value?.resize()
//       }
//       window.addEventListener('resize', handleResize)

//       //组件卸载时清理
//       onUnmounted(() => {
//         window.removeEventListener('resize', handleResize)
//         myChart.value?.dispose()
//       })
//     }
//   }
// }
// // 监听数据变化，并重新初始化图表
// watch(
//   () => props.data,
//   (newData) => {
//     if (newData.timeList.length > 0) {
//       initChart()
//     }
//   },
//   { immediate: true } //立即执行一次
// )

// //确保DOM挂载后检查数据
// onMounted(() => {
//   if (props.data.timeList && props.data.timeList.length > 0) {
//     initChart()
//   }
// })
const initChart = () => {
  if (!chartContainer.value) return

  // 清理旧实例
  if (myChart.value) {
    myChart.value.dispose()
  }

  myChart.value = echarts.init(chartContainer.value)
  updateChart()
}

// 更新图表
const updateChart = () => {
  if (!myChart.value) return

  if (!hasValidData()) {
    // 显示空状态
    myChart.value.setOption({
      title: {
        text: '暂无数据',
        left: 'center',
        top: 'center',
        textStyle: { color: '#999', fontSize: 14 }
      },
      xAxis: { show: false },
      yAxis: { show: false },
      series: []
    })
    return
  }

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['客户数量', '买入交易总量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: props.data.timeList,
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '数量'
    },
    series: [
      {
        name: '客户总量',
        type: 'bar',
        data: props.data.countList,
        itemStyle: {
          color: '#5470c6'
        }
      },
      {
        name: '买入交易总量',
        type: 'line',
        data: props.data.countList,
        itemStyle: {
          color: '#91cc75'
        },
        lineStyle: {
          width: 3
        }
      }
    ]
  }

  myChart.value.setOption(option)
}

// 响应式调整
const handleResize = () => {
  myChart.value?.resize()
}

// 监听数据变化
watch(
  () => props.data,
  () => {
    nextTick(updateChart)
  },
  { deep: true }
)

// 生命周期
onMounted(() => {
  nextTick(() => {
    initChart()
    window.addEventListener('resize', handleResize)
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  myChart.value?.dispose()
})
</script>
